import 'package:flutter/material.dart';
import 'package:fsharing/core/models/me.dart';
import 'package:fsharing/core/viewmodels/pages/mine/req_code_model.dart';
import 'package:fsharing/core/viewmodels/pages/mine/user_mobile_update_model.dart';
import 'package:fsharing/core/viewmodels/view_model.dart';
import 'package:fsharing/ui/widgets/background_container.dart';
import 'package:fsharing/ui/widgets/count_down_text.dart';
import 'package:fsharing/ui/widgets/round_back_button.dart';
import 'package:oktoast/oktoast.dart';
import 'package:provider/provider.dart';

class UserMobilePage extends StatelessWidget {
  final Me me;

  UserMobilePage({
    Key key,
    this.me,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider(
      create: (context) => UserMobileUpdateModel(Provider.of(context, listen: false), me),
      child: BackgroundContainer(
        child: Scaffold(
          appBar: AppBar(
            leading: RoundBackButton(),
            title: Text('重新绑定手机号码'),
          ),
          body: SingleChildScrollView(
            padding: EdgeInsets.symmetric(horizontal: 12),
            child: Builder(
              builder: (context) {
                UserMobileUpdateModel model = Provider.of(context, listen: false);
                return Column(
                  children: <Widget>[
                    _WrapContainer(
                      child: TextFormField(
                        decoration: InputDecoration(
                          hintText: '要绑定的新手机号码',
                        ),
                        keyboardType: TextInputType.phone,
                        onChanged: (value) {
                          model.mobile = value;
                        },
                      ),
                    ),
                    SizedBox(height: 10),
                    Row(
                      children: <Widget>[
                        Expanded(
                          child: _WrapContainer(
                            child: TextFormField(
                              decoration: InputDecoration(
                                hintText: '新手机接收的验证码',
                              ),
                              onChanged: (value) {
                                model.checkCode = value;
                              },
                            ),
                          ),
                        ),
                        SizedBox(width: 1),
                        Container(
                          alignment: Alignment.center,
                          color: Colors.white10,
                          width: 118,
                          height: 50,
                          child: ChangeNotifierProvider(
                            create: (context) => ReqCodeModel(Provider.of(context, listen: false)),
                            child: Consumer<ReqCodeModel>(
                              builder: (context, model, child) {
                                switch (model.viewState) {
                                  case ViewState.busy:
                                    return FlatButton(
                                      onPressed: null,
                                      child: SizedBox(
                                        width: 14,
                                        height: 14,
                                        child: CircularProgressIndicator(),
                                      ),
                                    );
                                  case ViewState.success:
                                    return FlatButton(
                                      onPressed: null,
                                      child: CountDownText(
                                        function: () {
                                          model.viewState = ViewState.idle;
                                        },
                                        style: TextStyle(color: Colors.grey, fontSize: 16),
                                      ),
                                    );
                                  default:
                                    return FlatButton(
                                      onPressed: () {
                                        _onNewCodeClicked(context);
                                      },
                                      child: Text(
                                        '发送验证码',
                                        style: TextStyle(color: Colors.grey, fontSize: 16),
                                      ),
                                    );
                                }
                              },
                            ),
                          ),
                        ),
                      ],
                    ),
                    if (me.mobile != null) ...[
                      SizedBox(height: 10),
                      Row(
                        children: <Widget>[
                          Expanded(
                            child: _WrapContainer(
                              child: TextFormField(
                                decoration: InputDecoration(
                                  hintText: '原手机接收的验证码',
                                ),
                                onChanged: (value) {
                                  model.verifyCode = value;
                                },
                              ),
                            ),
                          ),
                          SizedBox(width: 1),
                          Container(
                            alignment: Alignment.center,
                            color: Colors.white10,
                            width: 118,
                            height: 50,
                            child: ChangeNotifierProvider(
                              create: (context) =>
                                  ReqCodeModel(Provider.of(context, listen: false)),
                              child: Consumer<ReqCodeModel>(
                                builder: (context, model, child) {
                                  switch (model.viewState) {
                                    case ViewState.busy:
                                      return FlatButton(
                                        onPressed: null,
                                        child: SizedBox(
                                          width: 14,
                                          height: 14,
                                          child: CircularProgressIndicator(),
                                        ),
                                      );
                                    case ViewState.success:
                                      return FlatButton(
                                        onPressed: null,
                                        child: CountDownText(
                                          function: () {
                                            model.viewState = ViewState.idle;
                                          },
                                          style: TextStyle(color: Colors.grey, fontSize: 16),
                                        ),
                                      );
                                    default:
                                      return FlatButton(
                                        onPressed: () {
                                          _onOldCodeClicked(context);
                                        },
                                        child: Text(
                                          '发送验证码',
                                          style: TextStyle(color: Colors.grey, fontSize: 16),
                                        ),
                                      );
                                  }
                                },
                              ),
                            ),
                          ),
                        ],
                      ),
                      Container(
                        alignment: Alignment.centerLeft,
                        margin: EdgeInsets.only(top: 10),
                        child: Text(
                          '原手机号:${me.mobile.replaceRange(3, 7, '****')}',
                          style: TextStyle(color: Colors.grey),
                        ),
                      )
                    ],
                    Container(
                      margin: EdgeInsets.only(top: 40),
                      width: 256,
                      height: 65,
                      child: Consumer<UserMobileUpdateModel>(
                        builder: (context, model, child) {
                          switch (model.viewState) {
                            case ViewState.busy:
                              return RaisedButton(
                                onPressed: null,
                                child: SizedBox(
                                  child: CircularProgressIndicator(),
                                ),
                              );
                            default:
                              return RaisedButton(
                                onPressed: () {
                                  _onUpdateClicked(context);
                                },
                                child: Text(
                                  '确定',
                                  style: TextStyle(fontSize: 18),
                                ),
                              );
                          }
                        },
                      ),
                    ),
                  ],
                );
              },
            ),
          ),
        ),
      ),
    );
  }

  void _onNewCodeClicked(BuildContext context) async {
    UserMobileUpdateModel userMobileUpdateModel = Provider.of(context, listen: false);
    var mobile = userMobileUpdateModel.mobile;
    ReqCodeModel reqCodeModel = Provider.of(context, listen: false);
    var viewState = await reqCodeModel.reqCode(ReqCodeModel.UPDATE_MOBILE, mobile);
    switch (viewState) {
      case ViewState.error:
        showToast(reqCodeModel.errorMessage);
        break;
      default:
        showToast('短信已发送');
        break;
    }
  }

  void _onOldCodeClicked(BuildContext context) async {
    ReqCodeModel reqCodeModel = Provider.of(context, listen: false);
    var viewState = await reqCodeModel.reqCode(ReqCodeModel.UPDATE_MOBILE, me.mobile);
    switch (viewState) {
      case ViewState.error:
        showToast(reqCodeModel.errorMessage);
        break;
      default:
        showToast('短信已发送');
        break;
    }
  }

  void _onUpdateClicked(BuildContext context) async {
    UserMobileUpdateModel model = Provider.of(context, listen: false);
    var viewState = await model.userMobileUpdate();
    switch (viewState) {
      case ViewState.error:
        showToast(model.errorMessage);
        break;
      default:
        showToast('更新成功');
        Navigator.of(context).pop(model.mobile);
        break;
    }
  }
}

class _WrapContainer extends StatelessWidget {
  final EdgeInsetsGeometry margin;
  final Widget child;

  _WrapContainer({
    Key key,
    this.margin,
    this.child,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      alignment: Alignment.center,
      padding: EdgeInsets.symmetric(horizontal: 16),
      color: Colors.white10,
      height: 50,
      margin: margin,
      child: child,
    );
  }
}
